import {
    SHOP_DECORATION_ACTION,
    GET_SHOP_DECORATION,
    SET_SHOP_DECORATION,
    STORAGE_SHOP_DECORATION,
    UPDATE_CHECKEDID_SHOP_DECORATION,
    UPDATE_PROPS_SHOP_DECORATION,
    DELETE_CHECKEDID_SHOP_DECORATION,
    SWAP_SHOP_DECORATION,
    CLEAR_SHOP_DECORATION
} from '@/utils/Const';
import Storage from '@/utils/Storage';
import { swapArray } from '@/utils/Tools';
export default {
    namespaced: true,
    state: {
        value: Storage.get(STORAGE_SHOP_DECORATION, 1) || {
            mobile: {
                list: [],
                checkedId: ''
            },
            pc: {
                list: [],
                checkedId: ''
            }
        }
    },
    getters: {
        [GET_SHOP_DECORATION](state) {
            return state.value;
        }
    },
    mutations: {
        [SET_SHOP_DECORATION](state, payload) {
            // 是否移动端
            let key = payload.ismobile ? 'mobile' : 'pc';
            state.value[key].list.push(payload);
            delete payload.ismobile;
            Storage.set(STORAGE_SHOP_DECORATION, state.value, 1);
        },
        // 选择的ID
        [UPDATE_CHECKEDID_SHOP_DECORATION](state, payload) {
            // 是否移动端
            let key = payload.ismobile ? 'mobile' : 'pc';
            state.value[key].checkedId = payload.checkedId;
            Storage.set(STORAGE_SHOP_DECORATION, state.value, 1);
        },
        // 更新属性
        [UPDATE_PROPS_SHOP_DECORATION](state, payload) {
            // 是否移动端
            let key = payload.ismobile ? 'mobile' : 'pc';
            let propsData = state.value[key];
            let checkedId = propsData.checkedId;
            if (checkedId) {
                propsData.list.forEach((item) => {
                    if (item.id === checkedId) {
                        item.defaultProps = {
                            ...item.defaultProps,
                            ...payload.defaultProps
                        };
                    }
                });
                Storage.set(STORAGE_SHOP_DECORATION, state.value, 1);
            }
        },
        // 删除某一个组件
        [DELETE_CHECKEDID_SHOP_DECORATION](state, payload) {
            let key = payload.ismobile ? 'mobile' : 'pc';
            let propsData = state.value[key];
            let checkedId = propsData.checkedId;
            propsData.list.forEach((item, i) => {
                if (item.id === checkedId) {
                    propsData.list.splice(i, 1);
                }
            });
            Storage.set(STORAGE_SHOP_DECORATION, state.value, 1);
        },
        // 组件位置交换
        [SWAP_SHOP_DECORATION](state, payload) {
            let key = payload.ismobile ? 'mobile' : 'pc';
            state.value[key].list = swapArray(
                state.value[key].list,
                payload.index1,
                payload.index2
            );
            Storage.set(STORAGE_SHOP_DECORATION, state.value, 1);
        },
        // 清空
        [CLEAR_SHOP_DECORATION](state, payload) {
            let key = payload.ismobile ? 'mobile' : 'pc';
            state.value[key].list = [];
            state.value[key].checkedId = '';
            Storage.set(STORAGE_SHOP_DECORATION, state.value, 1);
        }
    },
    actions: {
        [SHOP_DECORATION_ACTION]({ commit }, payload) {
            commit(SET_SHOP_DECORATION, payload);
        }
    }
};